
/*************  登录页面  ****************/
// 点击 立即登录 弹出登录框
$('.btn_login').on('click', function () {
  $('.login_box').show()
  $('.large').show()
  $('.username').val('')
  $('.password').val('')
  // 判断是否有保存的cookie
  if ($.cookie('name')) {
    $('.username').val($.cookie('name'))
    $('.password').val($.cookie('pwd'))
  }
})
// 点击退出 登录框 隐藏
$('.close').on('click', function () {
  $('.login_box').hide()
  $('.large').hide()
})
// input 里面值改变，密码就消失
$('.username').on('input', () => {
  if ($('.username').val() == $.cookie('name')) {
    $('.username').val($.cookie('name'))
    $('.password').val($.cookie('pwd'))
  }
  if ($('.username').val() != $.cookie('name')) {
    $('.password').val('')
  }
})

// 表单提交事件
$('.login_box').on('submit', e => {
  e.preventDefault()
  if ($('.username').val() == '' || $('.password').val() == '') {
    $('.tips').html('昵称或者密码不能为空').show()
  }
  else {
    // 获取用户名、密码、是否记住用户
    const username = $('.username').val()
    const password = $('.password').val()
    const _checked = $('.check_input').prop('checked')
    $.ajax({
      type: "POST",
      url: "http://localhost:9527",
      data: { username: username, password: password },
      dataType: "json",
      success: function (code) {
        if (code === 200) {
          // 登录成功
          // 判断是否保存用户信息
          if (_checked) {
            $.cookie('name', username, { expires: 7 })
            $.cookie('pwd', password, { expires: 7 })
          } else {
            $.cookie('name', username, { expires: -1 })
            $.cookie('pwd', password, { expires: -1 })
          }
          // 关闭登录页面
          $('.username_b').text($('.username').val())
          $('.login_box').hide()
          $('.large').hide()
          $('.qq_false').hide()
          $('.qq_true').show()
        } else {
          // 登录失败
          // 提示失败信息
          $('.tips').show().html('昵称或者密码错误')
        }
      }
    })
  }
})

// 点击退出登录
$('.qq_close').on('click', function () {
  $('.qq_false').show()
  $('.qq_true').hide()
})
/************  楼层导航  ***************/
// 点击导航到指定位置
const arr = ['.menu', '.flash_sale', '.new_goods', '.peripheral_goods', '.wonderful_activities']
$('ol>li').click(function () {
  $(this).addClass('ol_active').siblings().removeClass('ol_active')
  const li_top = $(arr[$(this).index()]).offset().top
  $('html,body').animate({ scrollTop: li_top })
})
// 滚动页面时 导航栏改变
$(window).scroll(function () {
  const scroll_top = document.documentElement.scrollTop || document.body.scrollTop
  if (scroll_top < 621) $('ol>li:nth-child(1)').addClass('ol_active')
    .siblings().removeClass('ol_active')
  if (scroll_top >= 621) $('ol>li:nth-child(2)').addClass('ol_active')
    .siblings().removeClass('ol_active')
  if (scroll_top >= 1141) $('ol>li:nth-child(3)').addClass('ol_active')
    .siblings().removeClass('ol_active')
  if (scroll_top >= 2000) $('ol>li:nth-child(4)').addClass('ol_active')
    .siblings().removeClass('ol_active')
  if (scroll_top >= 2100) $('ol>li:nth-child(5)').addClass('ol_active')
    .siblings().removeClass('ol_active')
})

/*************  轮播图  ****************/
const imgs = $('.rotation_img>li')
const dots = $('.dot>li')
let index = 0
let timeId = null
function move(type) {
  imgs[index].classList.remove('active_img')
  dots[index].classList.remove('active_dot')
  if (type === true) index++
  else index = type
  if (index >= 4) index = 0
  imgs[index].classList.add('active_img')
  dots[index].classList.add('active_dot')
}
timeId = setInterval(() => {
  move(true)
}, 3000)
document.querySelector('.rotation').addEventListener('mouseenter', function () {
  clearInterval(timeId)
}, false)
document.querySelector('.rotation').addEventListener('mouseleave', function () {
  timeId = setInterval(() => {
    move(true)
  }, 3000)
}, false)
for (let i = 0; i < 4; i++) {
  dots[i].addEventListener('mouseenter', () => {
    move(i)
  }, false)
}

/**************  切换 div 显示不同的商品  **************/
$('.new_arrivals').on('click', function () {
  console.log(8);
  $('.new_arrivals').addClass('span_active')
  $('.popular_recommendation').removeClass('span_active')
  $('.new_arrivals_goods').show()
  $('.popular_recommendation_goods').hide()
})
$('.popular_recommendation').on('click', function () {
  $('.popular_recommendation').addClass('span_active')
  $('.new_arrivals').removeClass('span_active')
  $('.new_arrivals_goods').hide()
  $('.popular_recommendation_goods').show()
})
